<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset-global.css" />
    <link rel="stylesheet" href="../css/website.css" />
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
     <!-- 头部 -->
    <div class="top">
      <div class="header same">
        <div class="top center flex">
          <div class="header_left flex">
            <img src="../img/top1.png" alt="">
            <img src="../img/top2.png" alt="">
            <img src="../img/top3.png" alt="">
            <img src="../img/top4.png" alt="">
            <img src="../img/top5.png" alt="">
          </div>
          <div class="header_right  flex" >
            <div class="emli flex">
              <img src="../img/1_06.png" alt="">
              <p>ContacUst@Gmail.com</p>
            </div>
            <div class="emli flex">
              <img src="../img/1_03.png" alt="">
              <p>80888887</p>
            </div>
          </div>
        </div>
      </div>
      <!-- top_header -->
      <div class="nav same">
        <div class="navs center flex">
          <div class="logo"> <img src="../img/1_11.png" alt=""></div>
          <ul class="flex">
            <li><a href="index.html" >HOME</a></li>
            <li><a href="blog.html">BLOG</a></li>
            <li><a href="aboutus.html" >ABOUT US</a></li>
            <li><a href="contact.html" class="active">CONTACT</a></li>
          </ul>
        </div>
      </div>
      <!-- top_nav -->
      <div class="same banner">
        <div class="banner_cot center">
          <div class="wenzi">
            <h1>SEE &nbsp; THE&nbsp; WORD&nbsp; DIFFERENTLY</h1>
            <p>Request,design and book travel experiences as uniquelas you are</p>
          </div>
          <div class="search">
            <input type="search" placeholder="Where are you going ?"> 
            <button type="button" >
              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
              Search
            </button>
          </div>
          <div class="paris">
            <p>TOP DESTINATION: PARIS ,ZNEWYORKLONDON ROMESANFRANC c  MORE..</p>
          </div>
        </div>
      </div>
      <!-- top_bnaner -->
    </div>

    <div class="content">
      <div class="contents">
        <div class="contentleft">
          <p>Content</p>
          <div class="con1">
            <span>Enter you name:</span>
            <input type="text" />
          </div>
          <div class="con1">
            <span>Enter you email:</span>
            <input type="text" />
          </div>
          <div class="con2">
            <span>Your message here:</span>
            <textarea name="message" id="message" cols="" rows=""></textarea>
          </div>
          <div class="con3">
            <button>Submit</button>
          </div>
        </div>
        <div class="zhutiright">
          <div class="zhuright">
            <img src="../img/2_03.png" alt="" />
          </div>
          <div class="zhuright1">
            <span>Tags</span>
            <p><meter min="0" low="100" high="90" max="100" optimum="100" value="30"></meter></p>
            <div class="pq"><p>animals , cooking , countries ,home , likes , photo , travel ,video</p></div>
          </div>
          <div class="zhuright2">
            <span>TRENDING NEWS</span>
            <p><meter min="0" low="100" high="90" max="100" optimum="100" value="90"></meter></p>
            <div class="zhuright2s">
              <img src="../img/2_07.png" alt="" />
              <p>An djak ajs ajida ajskdja akdj dalkdl adas</p>
            </div>
            <div class="zhuright2s">
              <img src="../img/2_10.png" alt="" />
              <p>An djak ajs ajida ajskdja akdj dalkdl adas</p>
            </div>
            <div class="zhuright2s">
              <img src="../img/2_12.png" alt="" />
              <p>An djak ajs ajida ajskdja akdj dalkdl adas</p>
            </div>
            <div class="zhuright2s">
              <img src="../img/2_14.png" alt="" />
              <p>An djak ajs ajida ajskdja akdj dalkdl adas</p>
            </div>
          </div>
          <div class="zhuright3">
            <span>Archives</span>
            <p><meter min="0" low="100" high="90" max="100" optimum="100" value="40"></meter></p>
            <div class="xiala">
              <form>
                <select>
                  <option>Select Mouth</option>
                </select>
              </form>
            </div>
          </div>
          <div class="zhuright4">
            <span>Gallery</span>
            <p><meter min="0" low="100" high="90" max="100" optimum="100" value="40"></meter></p>
            <div class="zhuright4s">
              <img src="../img/2_12.png" alt="" />
              <img src="../img/1_65.png" alt="" />
              <img src="../img/1_68.png" alt="" />
            </div>
            <div class="zhuright4s">
              <img src="../img/1_70.png" alt="" />
              <img src="../img/1_72.png" alt="" />
              <img src="../img/1-2_06.png" alt="" />
            </div>
            <div class="zhuright4s">
              <img src="../img/2_12.png" alt="" />
              <img src="../img/2_10.png" alt="" />
              <img src="../img/2_07.png" alt="" />
            </div>
            <div class="zhuright4s">
              <img src="../img/1_72.png" alt="" />
              <img src="../img/1_68.png" alt="" />
              <img src="../img/2_12.png" alt="" />
            </div>
          </div>
          <div class="zhuright5">
            <span>Meta</span>
            <p><meter min="0" low="100" high="90" max="100" optimum="100" value="30"></meter></p>
            <div class="meta">
              <p class="metes">>May 2015</p>
              <p class="metes">>May 2015</p>
              <p class="metes">>May 2015</p>
              <p class="metes">>May 2015</p>
            </div>
          </div>
        </div>
      </div>
    </div>
      </div>
    </div>

    <!-- 底部 -->
  <div class="bottom same">
    <div class="bottom_top center flexs">
      <div class="botTop_left">
        <img src="../img/1_78.png" alt="">
        <p>
          Nam libero tempore,cum soluta nobis esteligendi optio cumque quod maxime
          placeat cum soluta nobis facere possimusnihil impedit quo minus id quod maximeplaceat facere possimus. est eligendioptio cumque
        </p>
        <p>
          facere possimus nihil impedit quo minusid quod maxime placeat facere possimus.
        </p>
      </div>
      <div class="botTop_left">
        <h3>News Letter</h3>
        <div class="progress">
          <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
            <span class="sr-only">50% Complete (warning)</span>
          </div>
        </div>
        <p>
          facere possimus nihil iimpedit quo minusid quod maxime placeat facere possimus.est eligendi
        </p>
        <input type="text" placeholder="Enter your emall adaress...">
        <button>SUBCRIBE NOW</button>
      </div>
      <div class="botTop_left">
        <h3>News Letter</h3>
        <div class="progress">
          <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
            <span class="sr-only">50% Complete (warning)</span>
          </div>
        </div>
        <div class="photos flex">
          <img src="../img/1-2_03.png" alt="">
          <img src="../img/1-2_03.png" alt="">
          <img src="../img/1-2_03.png" alt="">

        </div>
      </div>
    </div>
  </div>
  <div class="bottoms same">
    <p>Copyright D 2015.Company name All rights reserved.氧设计</p>
  </div>
  </body>
</html>
